Guide Flexbox - Code Reference

1. Activation de Flexbox

Conteneur Flex

          .container {
    display: flex;           /* Conteneur flex en ligne */
    /* ou */
    display: inline-flex;    /* Conteneur flex en ligne */
}
        

          Tout élément direct d'un conteneur flex devient un "élément flex"
        

2. Propriétés du Conteneur

flex-direction (Direction principale)

          .container {
    flex-direction: row;             /* par défaut - gauche à droite */
    flex-direction: row-reverse;     /* droite à gauche */
    flex-direction: column;          /* haut en bas */
    flex-direction: column-reverse;  /* bas en haut */
}
        

flex-wrap (Retour à la ligne)

          .container {
    flex-wrap: nowrap;       /* par défaut - pas de retour */
    flex-wrap: wrap;         /* retour à la ligne */
    flex-wrap: wrap-reverse; /* retour à la ligne inversé */
}
        

justify-content (Alignement principal)

          .container {
    justify-content: flex-start;    /* par défaut - début */
    justify-content: flex-end;      /* fin */
    justify-content: center;        /* centre */
    justify-content: space-between; /* espace entre */
    justify-content: space-around;  /* espace autour */
    justify-content: space-evenly;  /* espace égal */
}
        

align-items (Alignement secondaire)

          .container {
    align-items: stretch;     /* par défaut - étire */
    align-items: flex-start; /* début */
    align-items: flex-end;   /* fin */
    align-items: center;     /* centre */
    align-items: baseline;   /* ligne de base */
}
        

gap (Espacement)

          .container {
    gap: 10px;               /* espacement égal */
    gap: 10px 20px;          /* rangée colonne */
    row-gap: 10px;           /* espacement rangées */
    column-gap: 20px;        /* espacement colonnes */
}
        

3. Propriétés des Éléments

ordre

          .item {
    order: 0;    /* par défaut */
    order: 1;    /* position plus tard */
    order: -1;   /* position plus tôt */
}
        

flex-grow (Capacité à grandir)

          .item {
    flex-grow: 0;    /* par défaut - ne grandit pas */
    flex-grow: 1;    /* peut grandir */
    flex-grow: 2;    /* grandit 2x plus que flex-grow: 1 */
}
        

          flex-grow définit la capacité d'un élément à occuper l'espace disponible
        

flex-shrink (Capacité à rétrécir)

          .item {
    flex-shrink: 1;    /* par défaut - peut rétrécir */
    flex-shrink: 0;    /* ne rétrécit pas */
    flex-shrink: 2;    /* rétrécit 2x plus que flex-shrink: 1 */
}
        

          flex-shrink définit la capacité d'un élément à rétrécir si nécessaire
        

flex-basis (Taille initiale)

          .item {
    flex-basis: auto;    /* par défaut - taille du contenu */
    flex-basis: 0;       /* taille minimum */
    flex-basis: 100px;   /* taille fixe */
}
        

flex (Raccourci)

          .item {
    flex: 0 1 auto;    /* par défaut (grow shrink basis) */
    flex: 1;           /* équivalent à flex: 1 1 0 */
    flex: auto;        /* équivalent à flex: 1 1 auto */
    flex: none;        /* équivalent à flex: 0 0 auto */
}
        

align-self (Alignement individuel)

          .item {
    align-self: auto;       /* par défaut - suit align-items */
    align-self: flex-start; /* début */
    align-self: flex-end;   /* fin */
    align-self: center;     /* centre */
    align-self: stretch;    /* étire */
}
        

4. Exemples Pratiques

Centrage parfait

          .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;  /* pour centrer dans la page */
}
        

Navigation responsive

          .nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.nav-item {
    flex: 0 1 auto;  /* ne grandit pas, peut rétrécir */
}
        

Grille de cartes responsive

          .cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 1 300px;  /* grandit, rétrécit, base 300px */
    max-width: 100%;  /* évite dépassement sur mobile */
}
        

5. Points Importants

À retenir :

- flex-grow et flex-shrink sont proportionnels entre éléments
- flex-basis est calculé AVANT flex-grow et flex-shrink
- L'ordre visuel peut différer de l'ordre du DOM (attention à l'accessibilité)
- Les marges ne fusionnent pas en Flexbox
- min-width/max-width continuent de s'appliquer

Bonnes pratiques :

- Préférer gap aux marges pour l'espacement
- Utiliser flex-wrap pour le responsive
- Penser à l'accessibilité avec l'ordre
- Combiner avec media queries pour le responsive

Guide Flexbox - Cheatsheet

1. Activation de Flexbox

2. Propriétés du Conteneur

3. Propriétés des Éléments

4. Exemples Pratiques

5. Points Importants